<template>
  <div id="Carousel">
    <ul>
      <li v-for="item in lunbo" :key="item.id">
        <img :src="item.pic" alt="" />
        <p>{{item.title}}</p>
        <p>{{item.descript}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { newslist } from "../../utils/api";
export default {
  name: "",
  data() {
    return {
      lunbo: [],
    };
  },
  created() {
    newslist().then((res) => {
      console.log(res.data);
      this.lunbo = res.data;
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
*{
    font-size: .3rem;
}
#Carousel {
  width: 100%;
  height: 6.8rem;
  overflow: auto;
  border-bottom: 0.2rem solid #F5F5F5;

  ul {
    width: 550%;
    height: 5.3rem;
    
    position: relative;
    li {
      width: 7.3rem;
      overflow: hidden;
      float: left;
      margin-left: .1rem;
      margin-right: .1rem;

      img {
        width: 100%;
        height: 5rem;
      }
      p{
          font-size: .24rem;
          margin-top: 1%;
      }
    }
  }
}
</style>
